<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/workOrder.css" />
		<script type="text/javascript">
			// 获取HTML的DOM
			var htmlDom = document.getElementsByTagName('html')[0];
			var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
			// 设置html的fontsize
			htmlDom.style.fontSize = htmlWidth / 10 + 'px';
		</script>
	</head>

	<body>
		<div class="bottom-bow"></div>
		<div id="workOrder">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
				<h1 class="mui-title" style="color: #fff;">我的报修单</h1>
			</header>
			<div class="tab-list">
				<div class="list-item" v-for="(item,index) in tabList" @click="tabListClick(index)" :style="num==index?'color:#2A83FF;':''">{{item}}</div>
				<div class="tab-icon" :style="left"></div>
			</div>
			<div class="mui-content">
				<div id="refreshContainer" class="list-container mui-scroll-wrapper" style="top: 2.3466666667rem;">
					<div id="index" class="mui-scroll" >
					<!-- 在这里添加列表数据 -->
					</div>
				</div>
			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true,
				pullRefresh: {
					container: "#refreshContainer",
				
				}
			});
			mui.plusReady(function() {
				var Sdata = plus.webview.currentWebview();
				mui.post('http://192.168.0.102:9527/api_1_0/repairInfo/myIndex',{
						userID:Sdata.userID
					},function(data){
						for (var i = 0; i < data.data.length; i++) {
							if(data.data[i].status == 0)
								create_list(data.data[i]);
						}
						
					},'json'
				);
			})
			var workOrder = new Vue({
				el: '#workOrder',
				data: {
					num: 0,
					left: 'left:8%;',
					tabList: [
						'待维修',
						'维修中',
						'已完成'
					],
					movies: []
				},
				methods: {
					tabListClick: function(id) {
						this.num = id
						if(this.num == 0) {
							this.left = 'left:7%;'
							mui.plusReady(function() {
								var Sdata = plus.webview.currentWebview();
								mui.post('http://192.168.0.102:9527/api_1_0/repairInfo/myIndex',{
										userID:Sdata.userID
									},function(data){
										remove_list();
										for (var i = 0; i < data.data.length; i++) {
											if(data.data[i].status == 0)
												create_list(data.data[i]);
										}
										
									},'json'
								);
							})
						}
						if(this.num == 1) {
							this.left = 'left:41%;'
							mui.plusReady(function() {
								var Sdata = plus.webview.currentWebview();
								mui.post('http://192.168.0.102:9527/api_1_0/repairInfo/myIndex',{
										userID:Sdata.userID
									},function(data){
										remove_list();
										for (var i = 0; i < data.data.length; i++) {
											if(data.data[i].status == 1)
												create_list(data.data[i]);
										}
									},'json'
								);
							})
						} else if(this.num == 2) {
							this.left = 'left:74%;'
							mui.plusReady(function() {
								var Sdata = plus.webview.currentWebview();
								mui.post('http://192.168.0.102:9527/api_1_0/repairInfo/myIndex',{
										userID:Sdata.userID
									},function(data){
										remove_list();
										for (var i = 0; i < data.data.length; i++) {
											if(data.data[i].status == 2)
												create_list(data.data[i]);
										}
									},'json'
								);
							})
						}
						
					},
					orderDetails: function() {
						mui.openWindow({
							url: 'orderDetails/index.html',
							id: 'orderDetails/index.html',
							extras: {
							   orderID: "01"
							}
						});
					}
				}
			});
			

			function create_list(content){
				var list_item_div = document.createElement("div");
				list_item_div.className = "list-item";
				list_item_div.addEventListener('click',function() {
						mui.openWindow({
							url: 'orderDetails/index.html',
							id: 'orderDetails/index.html',
							extras: {
							   orderID: content.repairID
							}
						});
					
					
				});
				var item_type_div = document.createElement("div");
				item_type_div.className = "item-type";
				item_type_div.innerText = content.repairType;
				var item_title_div = document.createElement("div");
				item_title_div.className = "item-title";
				item_title_div.innerText = content.repairDetail;
				var item_desc_div = document.createElement("div");
				item_desc_div.className = "item-desc";
				var span_location = document.createElement("span");
				span_location.innerText = content.repairPlace;
				var span_date = document.createElement("span");
				span_date.innerText = content.createTime;
				document.getElementById("index").appendChild(list_item_div);
				list_item_div.appendChild(item_type_div);
				list_item_div.appendChild(item_title_div);
				list_item_div.appendChild(item_desc_div);
				item_desc_div.appendChild(span_location);
				item_desc_div.appendChild(span_date);
			}
			function remove_list(){
				var f = document.getElementById("index");
				var childs = f.childNodes; 
				length = childs.length;
				for(var i=0; i < length; i++) { 
					f.removeChild(childs[0]);
				}
			}
		</script>
	</body>

</html>